<template>
  <div class="work-record-header">
    <el-row style="paddingBottom: 0">
      <el-col :span="24">
        <dynForm
          :info-form="searchForm"
          :search-tags="searchTags.slice(0, 3)"
          :select-list="selectList"
          label-width="100px"
        >
          <el-form-item v-show="!show">
            <el-button type="primary" icon="el-icon-search" @click="doSearch">
              {{ $t('search') }}</el-button>
          </el-form-item>
          <el-form-item v-show="!show">
            <span class="el-dropdown-link" @click="changeShow">
              {{ $t('expand') }}
              <i class="el-icon-arrow-down el-icon--right"/>
            </span>
          </el-form-item>
        </dynForm>
        <el-collapse-transition>
          <div v-show="show">
            <dynForm
              :info-form="searchForm"
              :search-tags="searchTags.slice(3)"
              :select-list="selectList"
              label-width="100px"
            >
              <el-form-item v-show="show">
                <el-button type="primary" icon="el-icon-search" @click="doSearch">
                  {{ $t('search') }}</el-button>
              </el-form-item>
              <el-form-item v-show="show">
                <span class="el-dropdown-link" @click="changeShow">
                  {{ $t('retract') }}
                  <i class="el-icon-arrow-up el-icon--right"/>
                </span>
              </el-form-item>
            </dynForm>
          </div>
        </el-collapse-transition>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { pickTime } from '@/utils/pickTime'
import eqpJob from '@/api/equipment/eqpbase'
import workRecordApi from '@/api/production/workRecord'
export default {
  name: 'WorkRecordHeader',
  props: {
    listQuery: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    const searchTags = [
      { label: this.$t('handlerId'), prop: 'eqp1Id', tag: 'DynSelect' },
      { label: this.$t('timeInterval'), prop: '', tag: 'Dyndaterange', render: () => {
        return (
          <el-date-picker
            vModel={this.timer}
            type='daterange'
            placeholder={'请选择' + `${this.$t('timeInterval')}`}
            start-placeholder={this.$t('StartDate')}
            end-placeholder={this.$t('EndDate')}
            value-format={'yyyy-MM-dd HH:mm:ss'}
            format={'yyyy-MM-dd HH:mm:ss'}
            default-time={['00:00:00', '23:59:59']}>
          </el-date-picker>
        )
      } },
      { label: this.$t('lotId'), prop: 'lotId', tag: 'DynInput' },
      { label: this.$t('workOrder'), prop: 'workOrder', tag: 'DynInput' },
      { label: this.$t('testProgramName'), prop: 'trProgram', tag: 'DynInput' },
      { label: this.$t('productName'), prop: 'productName', tag: 'DynInput' },
      { label: this.$t('customerLotId'), prop: 'custLotId', tag: 'DynInput' },
      { label: this.$t('custName'), prop: 'custName', tag: 'DynInput' },
      { label: this.$t('testerId'), prop: 'eqp2Id', tag: 'DynSelect', event: async(value) => {
        if (!value) {
          this.$set(this.selectList, 'headId', [])
          this.$set(this.searchForm, 'headId', '')
          return
        }
        const res = await eqpJob.getHeadidList({ testerid: value })
        if (Array.isArray(res.data)) {
          this.$set(this.selectList, 'headId', res.data)
          this.$set(this.searchForm, 'headId', res.data[0].id || '')
        }
      } },
      { label: this.$t('eqpheadids'), prop: 'headId', tag: 'DynSelect' }
    ]
    return {
      show: false,
      timer: pickTime(7),
      searchTags: Object.freeze(searchTags),
      searchForm: {},
      selectList: {}
    }
  },
  activated() {
    const querys = this.$route.query
    if (Object.keys(querys).length) {
      this.getEqpInfo()
    }
  },
  created() {
    this.getHandleList()
    this.getTestList()
  },
  methods: {
    doSearch() {
      const [startTime, endTime] = this.timer || []
      workRecordApi.searchInfo(this.$clearNull({ ...this.searchForm, startTime, endTime, ...this.listQuery })).then((res) => {
        this.$emit('initTable', res.data)
        this.$emit('initdataInfo', res)
      })
    },
    changeShow() {
      this.show = !this.show
    },
    async getTestList() {
      const res = await eqpJob.getEqpNameListBy({ eqpType: 'TESTER' })
      this.$set(this.selectList, 'eqp2Id', res.data)
    },
    async getHandleList() {
      const res = await eqpJob.getHandleList()
      this.$set(this.selectList, 'eqp1Id', res.data)
    },
    async getEqpInfo() {
      const querys = this.$route.query
      for (const [key, value] of Object.entries(querys)) {
        this.$set(this.searchForm, key, value)
      }
      this.doSearch()
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/defaultStyle.scss";
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
.el-icon-arrow-down {
  font-size: 12px;
}
</style>
